test(react-query-devtools/ReactQueryDevtools{,Panel}): add tests for the full prop wiring matrix#10851
Conversation
…the full prop wiring matrix
📝 WalkthroughWalkthroughTest coverage for React Query Devtools wrapper components ( ChangesDevTools Wrapper Test Coverage
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
|
View your CI Pipeline Execution ↗ for commit e10e9f9
☁️ Nx Cloud last updated this comment at |
🚀 Changeset Version Preview2 package(s) bumped directly, 23 bumped as dependents. 🟩 Patch bumps
|
size-limit report 📦
|
There was a problem hiding this comment.
🧹 Nitpick comments (1)
packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx (1)
66-75: 💤 Low valueConsider strengthening the onClose assertion.
The test creates a mock
onClosefunction but only verifies that some function was passed tosetOnCloseMock, not that the specificonCloseprop was forwarded. If the wrapper passes through the function unchanged, you could assert the exact reference. If the wrapper adds logic aroundonClose, consider testing that invoking the function passed tosetOnCloseMockactually calls the originalonClose.♻️ Option 1: Assert exact function if no wrapping occurs
- expect(setOnCloseMock).toHaveBeenCalledWith(expect.any(Function)) + expect(setOnCloseMock).toHaveBeenCalledWith(onClose)♻️ Option 2: Test behavior if wrapping occurs
expect(setOnCloseMock).toHaveBeenCalledWith(expect.any(Function)) + + // Verify the passed function invokes the original onClose + const passedFunction = setOnCloseMock.mock.calls[0][0] + passedFunction() + expect(onClose).toHaveBeenCalled()🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx` around lines 66 - 75, The test currently only asserts that setOnCloseMock received some function; update it to verify the actual onClose behavior: after rendering ReactQueryDevtoolsPanel with the onClose mock, grab the function passed into setOnCloseMock (e.g., const passed = setOnCloseMock.mock.calls[0][0]) and either assert reference equality with the original onClose (expect(passed).toBe(onClose)) if the prop should be forwarded unchanged, or invoke passed() and assert the original onClose mock was called (passed(); expect(onClose).toHaveBeenCalled()) if the wrapper is expected to wrap the handler; locate these in the ReactQueryDevtoolsPanel test where QueryClient, onClose, render, and setOnCloseMock are used.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In
`@packages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx`:
- Around line 66-75: The test currently only asserts that setOnCloseMock
received some function; update it to verify the actual onClose behavior: after
rendering ReactQueryDevtoolsPanel with the onClose mock, grab the function
passed into setOnCloseMock (e.g., const passed =
setOnCloseMock.mock.calls[0][0]) and either assert reference equality with the
original onClose (expect(passed).toBe(onClose)) if the prop should be forwarded
unchanged, or invoke passed() and assert the original onClose mock was called
(passed(); expect(onClose).toHaveBeenCalled()) if the wrapper is expected to
wrap the handler; locate these in the ReactQueryDevtoolsPanel test where
QueryClient, onClose, render, and setOnCloseMock are used.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 1f7bddc7-dacb-4f55-a85a-fd9e03952461
📒 Files selected for processing (2)
packages/react-query-devtools/src/__tests__/ReactQueryDevtools.test.tsxpackages/react-query-devtools/src/__tests__/ReactQueryDevtoolsPanel.test.tsx
🎯 Changes
Add test cases to both
ReactQueryDevtoolsandReactQueryDevtoolsPanelthat cover the full prop wiring matrix, mirroring the matrix already in place forSolidQueryDevtools(#10823, #10824) andSolidQueryDevtoolsPanel(#10827, #10828).ReactQueryDevtoolsinitialIsOpen→setInitialIsOpen+ default (falsewhen omitted)errorTypes→setErrorTypes+ default ([]when omitted)theme→setThemeQueryClient→setClientstyleNonce,shadowDOMTarget,hideDisabledQueries)unmountcleanupReactQueryDevtoolsPanelonClose→setOnClose+ default (no-op function when omitted)errorTypes→setErrorTypes+ defaulttheme→setThemeQueryClient→setClientstyleNonce,shadowDOMTarget,hideDisabledQueries)stylemerge contract (preserve default and override on conflict)unmountcleanupAll cases follow the existing mock pattern (`vi.mock('@tanstack/query-devtools', ...)` with per-method spies), and
stylecases use `toHaveStyle` from@testing-library/jest-dom.✅ Checklist
🚀 Release Impact
Summary by CodeRabbit